<template>
    <div class="zuozhebang">
        <div class="zuozhebang-title">
            <img src="../../../assets/img/zuozhebang.png" alt="">
            <span>作者榜</span>
        </div>
        <div class="xiahuaxian"></div>
        <div class="zuozhebang-zuozhe">
            <div class="zuozhebang-div1" v-for="item in zuozhelist" :key="item.id">
                <a href="#">
                    <img :src="getAssetsFile(item.url)" :alt="item.name">
                </a>
                <a href="#">
                    <div class="zuozhebang-div2">
                        <span class="zuozhebang-div2-span1">{{ item.name }}</span>
                        <span class="zuozhebang-div2-span2">{{ item.content }}</span>
                    </div>
                </a>
                <a href="#"><span class="button-span">+ 关注</span></a>
            </div>
        </div>
        <div class="xiahuaxian"></div>
        <div class="chakangengduo">
            <a href="#">
                <span>查看更多</span>
                <span class="iconfont icon-xiangyoujiantou"></span>
            </a>
        </div>
    </div>
</template>

<script setup lang="ts">
import { getzuozhelist } from '@/util/getapi';
import { getAssetsFile } from '@/util/utils';
import { onMounted, ref } from 'vue';
import type { zuozhelistType } from '../../../util/data';

const zuozhelist = ref<zuozhelistType>([]);

onMounted(async () => {
    try {
        const zuozhelistget = await getzuozhelist();
        if (zuozhelistget) {
            zuozhelist.value = zuozhelistget;
        }
    } catch (error) {
        console.error('Failed to fetch zuozhelist:', error);
    }
});
</script>

<style lang="scss" scoped>
@import url(../../../assets/rightcontent/zuozhebang.scss);
@import url(../../../assets/rightcontent.scss);
</style>